<template>
    <Dialog :title="title" :show="true" @close="cancel" :width="312" height="auto" :left="uiLeft" :top="uiTop">
        <div class="box" @click="whiteSpaceClick">
            <div class="prop-panel">

                <div class="prop-top">
                    <div class="item1">
                        <div>是否编辑：</div>
                        <div class="edit">
                            <el-switch v-model="editingRef" size="small" />
                            <el-button @click.stop="draw"> 重新绘制</el-button>
                            <el-button @click.stop="flat">纯平</el-button>
                        </div>
                    </div>
                    <div class="item1">
                        <div class="key">底面高程:</div>
                        <el-input v-model.lazy="bottom" :disabled="editingRef" type="number" @change="changeBottom" />
                    </div>
                    <!-- <div class="item2">
                        <div class="key"></div>
                        <div>
                            <el-button @click.stop="offset">偏移</el-button>
                        </div>
                    </div>
                    <div class="item2" v-show="showSlider">
                        <div class="key"></div>
                        <div class="fuc">
                            <el-slider v-model="offsetVal" @input="offsetChange" :min="-10" :max="10" :step="0.1"
                                :show-tooltip="true" style="width: 170px" />
                        </div>
                    </div> -->
                    <div class="item1">
                        <div class="key">柱体高度:</div>
                        <el-input type="number" v-model="ceilling" placeholder="请输入高度" :min="0"
                            @change="changeCeilling" />
                    </div>

                    <div class="item1">
                        <div class="key">编辑模式:</div>
                        <el-select v-model="analysisModeValue" placeholder="请选择">
                            <el-option v-for="item in analysisMode" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </div>
                </div>

            </div>
        </div>
    </Dialog>

</template>
<script setup lang="ts">
import Dialog from "@/components/Dialog.vue";
import { getProjectManager } from "@/scripts/getProjectManager";
import { onBeforeUnmount, onMounted, ref, watch } from "vue";
import {
    toVR,
    createVueDisposer
} from "earthsdk-ui";
import { getsceneObjNumfromSceneTree, processNum } from "@/scripts/utils";

const props = withDefaults(defineProps<{ title: string, sceneObject: any, createOrEdit: string }>(), {});
const emits = defineEmits(["cancel"]);
const cancel = () => {
    emits("cancel");
};

const uiLeft = document.body.clientWidth - 10 - 312;

const uiTop = document.body.clientHeight - document.body.clientHeight / 2;


const d = createVueDisposer(onBeforeUnmount);
const objm = getProjectManager();

const modelserSceneTreeWrapper = objm.modelserSceneTreeWrapper

const modelserManager = objm.modelserManager
const editPolygon = modelserManager.editPolygon;


let editingRef: any;
const bottom = ref(0);
const ceilling = ref(10);
const analysisModeValue = ref("1");

// 裁剪方式
const analysisMode = [
    {
        value: "1",
        label: "裁剪",
    },
    {
        value: "2",
        label: "压平",
    },
];

const init = () => {
    editingRef = toVR<any>(d, [props.sceneObject, "editing"])
    // editingRef.value = true

    bottom.value = processNum(props.sceneObject.bottom) ?? 0
    ceilling.value = processNum(props.sceneObject.ceilling - editPolygon.getMaxHeight(props.sceneObject.points));
    analysisModeValue.value = props.sceneObject.operation ?? "1"

    props.sceneObject.dispose(
        props.sceneObject.pointsChanged.disposableOn((e: any) => {
            bottom.value = processNum(editPolygon.getMinHeight(props.sceneObject.points))
            props.sceneObject.ceilling = Number(ceilling.value) + editPolygon.getMaxHeight(props.sceneObject.points);
        })
    );
}

watch(() => props.sceneObject, (newVal, oldVal) => {
    init()
}, { immediate: true })

const changeCeilling = (val: number) => {
    // 将输入值强制转换为数字，并确保不小于 0.1
    const numValue = Number(val);
    if (numValue <= 0 || isNaN(numValue)) {
        ceilling.value = 0
    }
}

const changeBottom = (val: number) => {
    // 将输入值强制转换为数字，并确保不小于 0.1
    const numValue = Number(val);
    if (!numValue || isNaN(numValue)) {
        bottom.value = 0
    }
}

watch(bottom, (newVal, oldVal) => {
    if (editingRef.value) return;
    const int = newVal - oldVal
    props.sceneObject.points = props.sceneObject.points.map((p: [number, number, number], i: number) => [p[0], p[1], p[2] + int])

});

watch([bottom, ceilling, analysisModeValue], () => {
    props.sceneObject.operation = analysisModeValue.value as "1" | "2";
    props.sceneObject.bottom = Number(bottom.value);
    props.sceneObject.ceilling = Number(ceilling.value) + editPolygon.getMaxHeight(props.sceneObject.points);
})


// 重新绘制
const draw = () => {
    if (editingRef.value) {
        editingRef.value = false;
    }
    props.sceneObject.points = []
    editingRef.value = true;

};

// 纯平
const flat = () => {
    ceilling.value = processNum(Number(ceilling.value) + editPolygon.getMaxHeight(props.sceneObject.points) - editPolygon.getMinHeight(props.sceneObject.points))
    props.sceneObject.points = props.sceneObject.points.map((p: [number, number, number]) => [p[0], p[1], editPolygon.getMinHeight(props.sceneObject.points)])
}

// 偏移值
const offsetVal = ref(0)
// 底部高程默认值
const bottomDefault = ref<any>([])

// 是否显示滑块
const showSlider = ref(false)

// 偏移
const offset = () => {
    offsetVal.value = 0
    bottomDefault.value = []
    showSlider.value = true
    bottomDefault.value = JSON.parse(JSON.stringify(props.sceneObject.points))
}

// 偏移监听
const offsetChange = (val: number) => {
    props.sceneObject.points = props.sceneObject.points.map((p: [number, number, number], i: number) => [p[0], p[1], bottomDefault.value[i][2] + val])
}

// 点击空白
const whiteSpaceClick = () => {
    showSlider.value = false
}

onMounted(() => {

});
onBeforeUnmount(() => {
    props.sceneObject.editing = false
});
</script>

<style scoped>
.box {
    padding: 15px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.prop-panel {
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.prop-top {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.item1 {
    display: grid;
    grid-template-columns: 95px 1fr;
    align-items: center;
    margin-bottom: 10px;
}


.item2 {
    display: grid;
    grid-template-columns: 95px 1fr;
    align-items: center;
}

.fuc {
    display: flex;
}


.prop-bottom {
    display: flex;
    justify-content: flex-end;
}

.el-input-number--small {
    width: 90px;
}

.el-button {
    margin-left: 0px !important;
}

.edit {
    display: flex;
    gap: 5px;
    align-items: center;
}
</style>
